<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灾情监测 - 苗情灾情监测系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/disaster.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
    <main class="disaster-container main-container">
        <!-- 左侧控制面板 -->
        <div class="sidebar">
            <!-- 筛选条件 -->
            <div class="filter-section">
                <h3>灾情筛选</h3>
                <div class="filter-item">
                    <label>灾害类型</label>
                    <select id="disasterType">
                        <option value="all">全部类型</option>
                        <option value="pest">病虫害</option>
                        <option value="weather">气象灾害</option>
                        <option value="disease">病害</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>时间范围</label>
                    <div class="date-range">
                        <input type="date" id="startDate">
                        <span>至</span>
                        <input type="date" id="endDate">
                    </div>
                </div>
                <div class="filter-item">
                    <label>严重程度</label>
                    <div class="severity-options">
                        <label class="checkbox-label">
                            <input type="checkbox" value="high" checked> 高风险
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" value="medium" checked> 中风险
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" value="low" checked> 低风险
                        </label>
                    </div>
                </div>
            </div>

            <!-- 统计概览 -->
            <div class="stats-section">
                <h3>灾情统计</h3>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-bug"></i>
                        </div>
                        <div class="stat-content">
                            <h4>病虫害</h4>
                            <div class="stat-value">12</div>
                            <div class="stat-trend positive">
                                <i class="fas fa-arrow-down"></i> -15%
                            </div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon weather">
                            <i class="fas fa-cloud-showers-heavy"></i>
                        </div>
                        <div class="stat-content">
                            <h4>气象灾害</h4>
                            <div class="stat-value">8</div>
                            <div class="stat-trend negative">
                                <i class="fas fa-arrow-up"></i> +20%
                            </div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon disease">
                            <i class="fas fa-virus"></i>
                        </div>
                        <div class="stat-content">
                            <h4>病害</h4>
                            <div class="stat-value">5</div>
                            <div class="stat-trend positive">
                                <i class="fas fa-arrow-down"></i> -8%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="content-area">
            <!-- 地图展示 -->
            <div class="map-section">
                <div class="section-header">
                    <h3>灾情分布</h3>
                    <div class="map-controls">
                        <button class="btn-control active" data-view="satellite">
                            <i class="fas fa-satellite"></i> 卫星图
                        </button>
                        <button class="btn-control" data-view="terrain">
                            <i class="fas fa-mountain"></i> 地形图
                        </button>
                    </div>
                </div>
                <div id="disasterMap" class="map-container"></div>
            </div>

            <!-- 趋势分析 -->
            <div class="trend-section">
                <div class="section-header">
                    <h3>灾情趋势</h3>
                    <div class="trend-controls">
                        <button class="btn-time active" data-range="week">周</button>
                        <button class="btn-time" data-range="month">月</button>
                        <button class="btn-time" data-range="year">年</button>
                    </div>
                </div>
                <div id="trendChart" class="chart"></div>
            </div>
        </div>

        <!-- 右侧信息面板 -->
        <div class="info-panel">
            <!-- 实时预警 -->
            <div class="panel-card">
                <h3>实时预警 <span class="badge warning">3</span></h3>
                <div class="alert-list">
                    <div class="alert-item high">
                        <div class="alert-header">
                            <span class="alert-type">病虫害预警</span>
                            <span class="alert-time">10分钟前</span>
                        </div>
                        <div class="alert-content">
                            <p>A区水稻田发现稻飞虱感染，建议立即采取防治措施</p>
                            <div class="alert-location">
                                <i class="fas fa-map-marker-alt"></i>
                                A区水稻田
                            </div>
                        </div>
                        <div class="alert-footer">
                            <button class="btn-text mark-handled">
                                <i class="fas fa-check"></i> 标记处理
                            </button>
                        </div>
                    </div>
                    <div class="alert-item medium">
                        <div class="alert-header">
                            <span class="alert-type">气象预警</span>
                            <span class="alert-time">30分钟前</span>
                        </div>
                        <div class="alert-content">
                            <p>预计未来48小时有强降雨，请做好防涝准备</p>
                            <div class="alert-location">
                                <i class="fas fa-map-marker-alt"></i>
                                全部区域
                            </div>
                        </div>
                        <div class="alert-footer">
                            <button class="btn-text mark-handled">
                                <i class="fas fa-check"></i> 标记处理
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 处理记录 -->
            <div class="panel-card">
                <h3>处理记录</h3>
                <div class="record-list">
                    <div class="record-item">
                        <div class="record-time">2024-03-19 15:30</div>
                        <div class="record-content">
                            <h4>已处理：病虫害防治</h4>
                            <p>对A区水稻田进行农药喷洒处理</p>
                        </div>
                        <div class="record-status completed">
                            <i class="fas fa-check-circle"></i> 已完成
                        </div>
                    </div>
                    <div class="record-item">
                        <div class="record-time">2024-03-18 09:15</div>
                        <div class="record-content">
                            <h4>已处理：排涝措施</h4>
                            <p>完成B区排水沟疏通工作</p>
                        </div>
                        <div class="record-status completed">
                            <i class="fas fa-check-circle"></i> 已完成
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="js/components/navbar.js"></script>
    <script src="js/disaster.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            Navbar.init();
        });
    </script>
</body>
</html> 